<template>
    <v-container fluid class="pa-0">
        <!-- Options -->
        <v-list nav class="pa-0" style="margin-left: -8px; margin-top: -14px">
            <v-list-item class="pb-0">
                <template v-slot:title>
                    <div class="text-subtitle-2">{{ "Options: " }}</div>
                </template>
            </v-list-item>
        </v-list>
        <v-row align="center">
            <v-col cols="auto">
                <v-text-field type="number" hide-details density="compact" v-model="range" label="Range" variant="outlined" suffix="ms" @blur="changeRange()" @keydown.native.enter="changeRange()"></v-text-field>
            </v-col>
        </v-row>
        <apexchart ref="scatterchart" type="scatter" height="350" :options="chartOptions" :series="chartSeries"></apexchart>
    </v-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { useTheme } from 'vuetify';
import WidgetHandling from '@/mixins/WidgetHandling';

export default defineComponent({
    name: 'AreaChart',
    props: ['chartData', 'timeVariable', 'yVariables'],
    mixins: [WidgetHandling],

    setup() {
        const theme = useTheme()

        return {
            theme, // Theme Object
        }
    },

    data() {
        return {
            chartSeries: [] as Array<any>,
            chartOptions: {
                chart: {
                    id: 'scatter',
                    type: 'scatter',
                    height: 350,
                    background: '#ffffff00',
                },
                dataLabels: {
                    enabled: false
                },
                xaxis: {
                    type: 'datetime',
                    range: 60000,
                    tickAmount: 10,
                    labels: {
                        datetimeFormatter: {
                            year: 'yyyy',
                            month: 'MMM \'yy',
                            day: 'dd MMM',
                            hour: 'HH:mm',
                        },
                    },
                    tickPlacement: 'on',
                },
                yaxis: {
                    decimalsInFloat: 2
                },
                markers: {
                    size: 4,
                    strokeColors: '#ffffff',
                },
                grid: {
                    xaxis: {
                        lines: {
                            show: false
                        }
                    },
                },
                tooltip: {
                    x: {
                        format: 'dd MMM yyyy HH:mm:ss'
                    }
                },
                theme: {
                    mode: 'dark'
                },
            } as any,
            range: 60000,
        }
    },

    mounted() {
        this.$nextTick(() => {
            const chart = (this.$refs.scatterchart as any).chart
            if (chart) {
                // console.log('Chart has rendered')
                // apply the theme on component mount
                this.applyTheme();
                // append the series to the chart
                this.initializeSeries();
            }
        })
    },

    watch: {
        // appendData to the chart if the submodelElementData changed
        chartData: {
            handler() {
                this.initializeSeries();
            },
            deep: true,
        },

        // apply the chart-theme if the theme changed
        isDark() {
            this.applyTheme();
        },
    },

    computed: {
        // Check if the current Theme is dark
        isDark() {
            return this.theme.global.current.value.dark
        },
    },

    methods: {
        // Function to initialize the chart (by appending the series)
        initializeSeries() {
            // console.log('initializeSeries: ', this.chartData, this.timeVariable, this.yVariables);
            // Prepare new series values
            let newSeries = this.prepareSeriesValues(this.chartData, this.yVariables);
            // prepare the tooltip for the y-axis
            let tooltip_y = this.prepareYValueTooltip(this.chartData, this.yVariables);
            // console.log('newSeries: ', newSeries);
            // update the series
            (this.$refs.scatterchart as any).updateSeries(newSeries);
            // console.log('tooltip y: ', tooltip_y);
            // update the tooltip
            (this.$refs.scatterchart as any).updateOptions({
                tooltip: {
                    y: tooltip_y
                }
            });
        },

        changeRange() {
            let range = Number(this.range);
            if (!range) {
                this.range = 60000;
                return;
            }
            if (range <= 0) {
                return;
            }
            (this.$refs.scatterchart as any).updateOptions({
                xaxis: {
                    range: this.range
                }
            });
        },

        // Function to apply the selected theme to the chart
        applyTheme() {
            if (this.isDark) {
                // apply the dark theme to the chart options
                (this.$refs.scatterchart as any).updateOptions({
                    theme: {
                        mode: 'dark'
                    },
                    markers: {
                        strokeColors: '#1E1E1E',
                    }
                });
            } else {
                // apply the light theme to the chart options
                (this.$refs.scatterchart as any).updateOptions({
                    theme: {
                        mode: 'light'
                    },
                    markers: {
                        strokeColors: '#ffffff',
                    }
                });
            }
        },
    },
})
</script>